<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <style>
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <c:if test="${loginInfo.userinfoId == 1}">
        <form class="layui-form layui-row">
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label" for="username">用户名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" id="username" placeholder="精确匹配" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label" for="nickname">昵称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="nickname" id="nickname" placeholder="模糊匹配" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label" for="phone">手机号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" id="phone" placeholder="精确匹配" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">状态：</label>
                    <div class="layui-input-block">
                        <select name="status" id="status">
                            <option value="">[选择状态]</option>
                            <option value="1">可用</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div style="margin-left: 20px">
                    <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search">查询</button>
                    <button type="reset" class="layui-btn layui-bg-orange">清空</button>
                </div>
            </div>
        </form>
    </c:if>
    <div style="height: 530px;overflow-y: scroll;margin-top: 10px">
        <table id="dataTable"></table>
    </div>
</div>
</body>
<script type="text/html" id="toolbar">
    <c:if test="${loginInfo.userinfoId == 1 && role == 1}">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </c:if>
</script>
<script type="text/html" id="optTemplet">
    <c:if test="${role == 1}">
        <button type="button" lay-event="edit" class="layui-btn layui-btn-sm layui-bg-blue">修改</button>
    </c:if>
    <c:if test="${loginInfo.userinfoId == 1}">
        {{# if(d.userinfoId !== 1){ }}
        <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-bg-orange">删除</button>
        {{# } }}
    </c:if>
</script>
<script type="text/html" id="statusTemplet">
    {{# if(d.status === 1){ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-green">可用</button>
    {{# }else{ }}
    <button type="button" lay-event="status" class="layui-btn layui-btn-sm layui-bg-red">禁用</button>
    {{# } }}
</script>
<script type="text/html" id="avatarTemplet">
    <div style="height: 110px;width: 110px;display: flex;align-items: center;justify-content: center">
        <img title="点击查看详情" onclick="showImage(this)" src="static/upload/{{d.avatar}}" alt="{{d.avatar}}"
             style="display: block;height: 100px;width: 100px;border-radius: 50%;cursor: pointer;">
    </div>
</script>
<script>
    var table;
    var form;
    layui.use(function () {
        /*加载表格模块*/
        table = layui.table;
        /*加载表单模块*/
        form = layui.form;
        /*渲染表格数据*/
        table.render({
            elem: "#dataTable",
            url: "admin/userinfo/page",
            where: {role: '${role}'},
            toolbar: "#toolbar",
            defaultToolbar: ['filter', 'print'],
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {field: "userinfoId", title: "编号"},
                {field: 'username', title: '用户名'},
                {field: 'nickname', title: '昵称',},
                {field: 'phone', title: '手机号',},
                {
                    field: 'sex', title: '性别', templet: function (d) {
                        switch (d.sex) {
                            case 0:
                                return "未选择";
                            case 1:
                                return "男";
                            case 2:
                                return "女";
                            default:
                                return "";
                        }
                    }
                },
                {field: 'avatar', title: '头像', templet: "#avatarTemplet"},
                {field: 'status', title: '状态', templet: "#statusTemplet"},
                {title: '操作', templet: '#optTemplet'}
            ]]
        });
        /*监听表格工具栏按钮*/
        table.on("tool(dataTable)", function (obj) {
            const userinfoId = obj.data.userinfoId;
            const event = obj.event;
            switch (event) {
                case "delete":
                    layer.confirm('确定删除编号[' + userinfoId + ']的数据吗?', {
                        icon: 3,
                        title: '询问'
                    }, function (index) {
                        $.ajax({
                            url: "admin/userinfo/delete/" + userinfoId,
                            method: "delete",
                            dataType: "json",
                            success(res) {
                                if (res.code === 200) {
                                    layer.msg("删除成功", {icon: 1})
                                    table.reloadData('dataTable')
                                } else {
                                    layer.alert(res.msg, {icon: 2})
                                }
                            },
                            error(e) {
                                layer.alert('服务器睡着了')
                                console.log(e)
                            }
                        })
                        layer.close(index);
                    })
                    break;
                case "edit":
                    layer.open({
                        type: 2,
                        content: "admin/userinfo/edit?userinfoId=" + userinfoId,
                        area: ["600px", "600px"]
                    })
                    break;
                case "status":
                    if (userinfoId === 1) {
                        layer.alert('超级管理员无法更改状态！', {icon: 2});
                    } else if (userinfoId == '${loginInfo.userinfoId}') {
                        layer.alert('当前用户无法更改状态！', {icon: 2});
                    } else {
                        let $status = '<span style="color: red">禁用</span>';
                        if (obj.data.status === 2) {
                            $status = '<span style="color: green">可用</span>';
                        }
                        layer.confirm('确定更改[' + userinfoId + ']的状态为' + $status + "吗?", {
                            icon: 3,
                            title: "询问"
                        }, function (index) {
                            $.ajax({
                                url: "admin/userinfo/status",
                                data: {
                                    userinfoId,
                                    status: obj.data.status === 1 ? 2 : 1
                                },
                                method: "post",
                                dataType: "json",
                                success(res) {
                                    if (res.code === 200) {
                                        layer.msg("状态更新成功！", {icon: 1})
                                        table.reloadData('dataTable')
                                    } else {
                                        layer.alert(res.msg, {icon: 2});
                                    }
                                },
                                error(e) {
                                    layer.alert('服务器睡着了')
                                    console.log(e)
                                }
                            })
                            layer.close(index);
                        })
                    }
                    break;
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        });
        /*监听表格头部按钮*/
        table.on("toolbar(dataTable)", function (obj) {
            const event = obj.event;
            console.log(obj)
            switch (event) {
                case "LAYTABLE_PRINT":
                case "LAYTABLE_COLS":
                    break;
                case "add":
                    layer.open({
                        type: 2,
                        content: "admin/userinfo/edit",
                        area: ["600px", "600px"]
                    })
                    break;
                default:
                    layer.msg("工具选项异常！", {icon: 2});
                    break;
            }
        })
        /*监听表单提交(查询按钮)*/
        form.on("submit(search)", function (data) {
            table.reload('dataTable', {
                where: {
                    ...data.field,
                    page: 1
                }
            });
            return false;
        });
    });

    function showImage(_this) {
        const fileName = $(_this).prop('alt')
        layer.photos({
            photos: {
                data: [{
                    alt: fileName,
                    src: 'static/upload/' + fileName
                }]
            }
        })
    }
</script>
</html>
